<template>
  <div id="videolist" ref="videolist" :style="{ height: usertable + 'px' }">
    <div id="videobox">
      <div  v-for="(item, index) in datas" :key="index" class="box">
        <div class="idbox">
          <div :id="'video_' + index"></div>
        </div>
        <div class="bottommsg">
          <el-tooltip
            class="item"
            effect="dark"
            :content="item.cameraName || '暂无数据'"
            placement="top"
          >
            <div class="videoname">{{ item.cameraName || "暂无数据" }}</div>
          </el-tooltip>
          <div class="dianwei">
            <el-tooltip
              class="item"
              effect="dark"
              :content="`摄像头点位 ${item.cameraPoint || '无'}`"
              placement="top"
            >
              <div class="left">
                {{ `摄像头点位 ${item.cameraPoint || "无"}` }}
              </div>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :content="`监控方位${item.monitorPosition || '无'}`"
              placement="top"
            >
              <div class="right">
                {{ `监控方位 ${item.monitorPosition || "无"}` }}
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
    <mugen-scroll
      :handler="loadMore"
      :should-handle="!loading"
      scroll-container="videolist"
    >
    </mugen-scroll>
  </div>
</template>
<script>
import { videoSurveillance} from "./apiindex";
import MugenScroll from "vue-mugen-scroll";
import Hls from "hls.js";
import Dplayer from "dplayer";
export default {
  components: {
    MugenScroll,
  },
  mounted() {
    setTimeout(() => {
      this.usertable = document.body.clientHeight / 1.35;
    }, 0);
  },
  methods: {
    onceGetiimg() {
      return new Promise((resa, reja) => {
        const loading = this.$loading({
          lock: true,
          text: "加载中",
          spinner: "el-icon-loading",
          background: "rgba(236, 241, 246,.5)",
        });
        let that = this;
        that.loading = true;
        let parmas = {
          pageNum: that.pageNum,
          pageSize: that.pageSize,
        };
        try {
          videoSurveillance(parmas).then((res) => {
            let data = res.data.data || [];
            that.datas = [...that.datas, ...data];
            that.countPage = res.data.countPage;
            that.datas.map((item, index) => {
              setTimeout(() => {
                setTimeout(() => {
                  if (!that.dp[index]) {
                    that.dp[index] = new Dplayer({
                      element: document.getElementById(`video_${index}`),
                      autoplay: false,
                      playbackSpeed: [1],
                      video: {
                        url: item.liveAddress,
                        type: "customHls",
                        pic:item.picUrl=='无'?require("./images/projtcebg.png"):item.picUrl||require("./images/projtcebg.png"),
                        customType: {
                          customHls: function (video, player) {
                            if (that.hls[index]) {
                              that.hls[index].stopLoad();
                              that.hls[index].destory();
                              that.dp[index].destory();
                            }
                            that.hls[index] = new Hls();
                            that.hls[index].loadSource(video.src);
                            that.hls[index].attachMedia(video);
                          },
                        },
                      },
                    });
                  }
                  loading.close();
                }, 1000);
              }, 500);
            });
            that.pageNum++;
            that.loading = false;
          }).catch(()=>{
            console.log('catch')
             loading.close();
             that.loading = false;
          })
          resa();
        } catch {
            console.log('catch')
          loading.close();
          that.loading = false;
        }
      });
    },
    loadMore() {
      if (this.pageNum <= this.countPage) {
        this.onceGetiimg();
      }
    },
  },
  destroyed() {
    let that = this;
    this.datas.map((item, index) => {
      that.hls[index].destroy();
      that.hls[index].stopLoad();
      that.dp[index].destroy();
    });
  },
  data() {
    return {
      pageNum: 1,
      countPage: 2,
      pageSize: 10,
      datas: [],
      loading: false,
      usertable: 0,
      hls: [],
      dp: [],
      imglist: [],
    };
  },
};
</script>
<style  lang="scss" >
#videolist {
  width: 100%;
  height: 478px;
  overflow-y: scroll;
  margin: 20px auto;
  // padding-top: 9%;
  &::-webkit-scrollbar {
    width: 6px; //对垂直方向滚动条
    height: 6px; //对水平方向滚动条
  }
  //滚动的滑块
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: rgb(213, 224, 227); //滚动条的颜色;
  }
  //内层滚动槽
  &::-webkit-scrollbar-track-piece {
    background-color: #ccc;
  }
  #videobox {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    justify-content: flex-start;
    .box {
      width: 31%;
      margin-bottom: 10px;
      z-index: 1011;
      color: #fff;
      margin-right: 13px;
      .idbox {
        width: 100%;
        .video-js .vjs-tech {
          position: relative !important;
        }
      }
    }
    .bottommsg {
      background: rgb(87, 156, 254);
      // width: 96%;
      position: relative;
      padding: 5px 0 5px 0;
      top: -4px;
      .videoname {
        padding: 0 12px;
        font-size: 17px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .dianwei {
        font-size: 14px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        padding: 0 12px;
        .left {
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: left;
        }
        .right {
          width: 50%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          text-align: right;
        }
      }
    }
  }
}
</style>